<template>
  <div>
    <ul class="goodsInfo" ref="ulgoods">
         <li class="goodsInfo_item" v-for="item in goodsList" :key="item.id" @click="jumpHandel">
          <div class="goodsImg">
            <img :src="item.listPicUrl" alt="">
          </div>
          <div class="goodsName">
            <img v-if="item.preLogo && item.preLogo[0].logoUrl" :src="`${item.preLogo && item.preLogo[0].logoUrl}`"
              alt="">
            {{ item.name }}
          </div>
          <div v-if="item.itemTagList && item.itemTagList[0].name" class="tag">
            <img src="../img/static-union_166909947513c0c8.png" alt="">
            {{ item.itemTagList && item.itemTagList[0].name }}
          </div>
          <div class="price">
            <h3 class="acPrice" style="display: inline-block;" v-if="item.finalPriceInfoVO.priceInfo.finalPrice">
              {{ item.finalPriceInfoVO.priceInfo.finalPrice && item.finalPriceInfoVO.priceInfo.finalPrice.prefix }}
              ￥{{ item.finalPriceInfoVO.priceInfo.finalPrice && item.finalPriceInfoVO.priceInfo.finalPrice.price ||
                item.finalPriceInfoVO.priceInfo.finalPrice && item.finalPriceInfoVO.priceInfo.finalPrice.basicPrice }}
            </h3>
            <h3 class="acPrice" style="display: inline-block;" v-else>
              ￥{{ item.finalPriceInfoVO.priceInfo.basicPrice && item.finalPriceInfoVO.priceInfo.basicPrice }}
            </h3>
            <del style="color:#999999;display: inline-block;" v-if="item.finalPriceInfoVO.priceInfo.counterPrice">
              <h3>￥{{ item.finalPriceInfoVO.priceInfo.counterPrice && item.finalPriceInfoVO.priceInfo.counterPrice }}</h3>
            </del>
          </div>
          <div class="fulldiscount" v-if="item.finalPriceInfoVO.banner && item.finalPriceInfoVO.banner.content">
            {{ item.finalPriceInfoVO.banner.price && item.finalPriceInfoVO.banner.price.prefix }}
            {{ item.finalPriceInfoVO.banner.price && item.finalPriceInfoVO.banner.price.price ? "￥" : '' }}{{
              item.finalPriceInfoVO.banner.price && item.finalPriceInfoVO.banner.price.price }}

            {{ item.finalPriceInfoVO.banner && item.finalPriceInfoVO.banner.title }}
            {{ item.finalPriceInfoVO.banner && item.finalPriceInfoVO.banner.content }}
          </div>
        </li>
      <li class="goodsInfo_item" v-if="isHidden">
        <div class="goodsImg"></div>
      </li>

    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
  name: 'GoodsList',
})
</script>

<script lang="ts" setup>
import { ref, onMounted } from "vue"
import { reqGoodsList } from "../../../api/homeApi"
import {useRouter} from "vue-router"
let isHidden = ref(true)
let size = ref<number>(10)
let goodsList = ref()
const loading = ref(false);
const finished = ref(false)
const router = useRouter()
async function isHiddenFlag() {
  let res = document.getElementsByClassName("goodsInfo_item")
  if (res.length / 2 == 1) {
    isHidden.value = true
  }
}

async function onLoad() {
  if (size.value > 60) {
    finished.value = true
    return
  }
  size.value += 10
  let data = await reqGoodsList({ size: size.value })
  goodsList.value = data.itemList
  loading.value = false
}

function jumpHandel(){
  router.push({
    path:"/detail"
  })
}

onMounted(() => {
  isHiddenFlag()
  // getGoodsList()
  onLoad()
})
</script>

<style lang="scss" scoped>
.goodsInfo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

  .goodsInfo_item {
    width: 47%;
    margin-top: 15px;

    .goodsImg {
      border-radius: 6px;

      img {
        width: 100%;
        border-radius: 14px;
      }
    }

    .goodsName {
      img {
        width: 20px;
        height: 20px;
        vertical-align: middle;
      }
    }

    .tag {
      width: 100px;
      height: 20px;
      border: 1px solid #d6d6d6;
      border-radius: 16px;
      text-align: center;
      line-height: 20px;

      img {
        width: 12px;
        vertical-align: middle;
      }
    }

    .price {
      .acPrice {
        color: red;
        font-size: 18px;
      }
    }

    .fulldiscount {
      height: 25px;
      background-color: red;
      border-radius: 16px;
      text-align: center;
      font-size: 10px;
      line-height: 25px;
      color: #fff;
      font-weight: 400;
    }
  }

}</style>